<script setup lang="ts">
import { ref, computed } from "vue";
import { invoke } from "@tauri-apps/api/core";

// 响应式数据
const amount = ref<number>(0); // 输入金额
const coefficients = ref<string>("10,60,30"); // 系数配置，用逗号分隔
const convertedAmount = ref<string>(""); // 单个转换结果
const batchResults = ref<string[]>([]); // 批量转换结果
const isLoading = ref<boolean>(false); // 加载状态

// 计算属性：解析系数数组
const coefficientArray = computed(() => {
  return coefficients.value
    .split(',')
    .map(c => parseFloat(c.trim()))
    .filter(c => !isNaN(c));
});

/**
 * 转换单个金额为中文
 */
async function convertSingle() {
  if (amount.value <= 0) {
    convertedAmount.value = "请输入有效金额";
    return;
  }
  
  try {
    isLoading.value = true;
    convertedAmount.value = await invoke("convert_to_chinese_amount", { 
      amount: amount.value 
    });
  } catch (error) {
    console.error("转换失败:", error);
    convertedAmount.value = "转换失败";
  } finally {
    isLoading.value = false;
  }
}

/**
 * 批量转换带系数的金额
 */
async function convertBatch() {
  if (amount.value <= 0) {
    batchResults.value = ["请输入有效金额"];
    return;
  }
  
  if (coefficientArray.value.length === 0) {
    batchResults.value = ["请输入有效系数"];
    return;
  }
  
  try {
    isLoading.value = true;
    batchResults.value = await invoke("batch_convert_with_coefficients", {
      amount: amount.value,
      coefficients: coefficientArray.value
    });
  } catch (error) {
    console.error("批量转换失败:", error);
    batchResults.value = ["转换失败"];
  } finally {
    isLoading.value = false;
  }
}

/**
 * 清空所有结果
 */
function clearResults() {
  convertedAmount.value = "";
  batchResults.value = [];
}
</script>

<template>
  <main class="container">
    <!-- 标题 -->
    <h1>中文金额转换工具</h1>
    <p class="subtitle">将阿拉伯数字转换为中文金额大写</p>

    <!-- 输入区域 -->
    <div class="input-section">
      <!-- 金额输入 -->
      <div class="input-group">
        <label for="amount-input">输入金额：</label>
        <input 
          id="amount-input" 
          v-model.number="amount" 
          type="number" 
          step="0.01"
          min="0"
          placeholder="请输入金额（如：200.50）" 
          class="amount-input"
        />
      </div>

      <!-- 系数配置 -->
      <div class="input-group">
        <label for="coefficients-input">系数配置（%）：</label>
        <input 
          id="coefficients-input" 
          v-model="coefficients" 
          type="text" 
          placeholder="用逗号分隔，如：10,20,30" 
          class="coefficients-input"
        />
        <small class="help-text">
          系数说明：输入百分数，如10表示10%。例如金额200，系数10，结果为20元
        </small>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="button-group">
      <button 
        @click="convertSingle" 
        :disabled="isLoading || amount <= 0"
        class="btn btn-primary"
      >
        {{ isLoading ? '转换中...' : '转换金额' }}
      </button>
      
      <button 
        @click="convertBatch" 
        :disabled="isLoading || amount <= 0 || coefficientArray.length === 0"
        class="btn btn-secondary"
      >
        {{ isLoading ? '转换中...' : '批量转换' }}
      </button>
      
      <button 
        @click="clearResults" 
        class="btn btn-outline"
      >
        清空结果
      </button>
    </div>

    <!-- 结果显示区域 -->
    <div class="results-section">
      <!-- 单个转换结果 -->
      <div v-if="convertedAmount" class="result-item">
        <h3>转换结果：</h3>
        <div class="result-text">{{ convertedAmount }}</div>
      </div>

      <!-- 批量转换结果 -->
      <div v-if="batchResults.length > 0" class="result-item">
        <h3>批量转换结果：</h3>
        <div class="batch-results">
          <div 
            v-for="(result, index) in batchResults" 
            :key="index" 
            class="batch-result-item"
          >
            <span class="coefficient-label">{{ coefficientArray[index] }}%:</span>
            <span class="arabic-amount">{{ (amount * coefficientArray[index] / 100).toFixed(2) }}元</span>
            <span class="result-text">{{ result }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 使用说明 -->
    <div class="help-section">
      <details>
        <summary>使用说明</summary>
        <ul>
          <li><strong>单个转换</strong>：直接将输入金额转换为中文大写，如200.50 → 贰佰元伍角整</li>
          <li><strong>批量转换</strong>：根据系数配置进行计算后转换，系数为百分数</li>
          <li>系数配置示例：输入"10,60,30"，金额200时分别转换20元、120元、60元</li>
          <li>金额支持小数点后两位，系数用逗号分隔</li>
        </ul>
      </details>
    </div>
  </main>
</template>

<style>
/* 全局样式 */
:root {
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: #2c3e50;
  background-color: #f8f9fa;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 容器样式 */
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 标题样式 */
h1 {
  text-align: center;
  color: #2c3e50;
  margin: 0;
  font-size: 2.2em;
  font-weight: 600;
}

.subtitle {
  text-align: center;
  color: #6c757d;
  margin: 0;
  font-size: 1.1em;
}

/* 输入区域样式 */
.input-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-group label {
  font-weight: 600;
  color: #495057;
  font-size: 0.95em;
}

.amount-input,
.coefficients-input {
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 1em;
  transition: all 0.3s ease;
  background-color: #fff;
}

.amount-input:focus,
.coefficients-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.help-text {
  color: #6c757d;
  font-size: 0.85em;
  line-height: 1.4;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #0056b3;
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: #28a745;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #1e7e34;
  transform: translateY(-1px);
}

.btn-outline {
  background-color: transparent;
  color: #6c757d;
  border: 2px solid #6c757d;
}

.btn-outline:hover {
  background-color: #6c757d;
  color: white;
}

/* 结果区域样式 */
.results-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.result-item {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.result-item h3 {
  margin: 0 0 12px 0;
  color: #495057;
  font-size: 1.2em;
  font-weight: 600;
}

.result-text {
  font-size: 1.3em;
  font-weight: 600;
  color: #007bff;
  background-color: #f8f9fa;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid #007bff;
}

.batch-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.batch-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #e9ecef;
}

.batch-result-item:last-child {
  border-bottom: none;
}

.coefficient-label {
  font-weight: 600;
  color: #6c757d;
  min-width: 60px;
  font-size: 0.9em;
}

.arabic-amount {
  color: #e67e22;
  font-weight: 600;
  margin-right: 12px;
  min-width: 100px;
  font-family: 'Consolas', 'Monaco', monospace;
}

/* 帮助区域样式 */
.help-section {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.help-section details {
  padding: 20px;
}

.help-section summary {
  font-weight: 600;
  color: #495057;
  cursor: pointer;
  padding: 4px 0;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 16px;
}

.help-section ul {
  margin: 0;
  padding-left: 20px;
  color: #6c757d;
}

.help-section li {
  margin-bottom: 8px;
  line-height: 1.5;
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  :root {
    color: #e9ecef;
    background-color: #1a1a1a;
  }

  .input-section,
  .result-item,
  .help-section {
    background-color: #2d3748;
    color: #e9ecef;
  }

  .amount-input,
  .coefficients-input {
    background-color: #4a5568;
    border-color: #4a5568;
    color: #e9ecef;
  }

  .amount-input:focus,
  .coefficients-input:focus {
    border-color: #63b3ed;
  }

  .result-text {
    background-color: #4a5568;
    color: #63b3ed;
    border-left-color: #63b3ed;
  }

  .help-section summary {
    border-bottom-color: #4a5568;
  }

  .batch-result-item {
    border-bottom-color: #4a5568;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    padding: 16px;
  }

  h1 {
    font-size: 1.8em;
  }

  .input-section {
    padding: 20px;
  }

  .button-group {
    flex-direction: column;
  }

  .btn {
    min-width: auto;
  }
}
</style>